<html lang="en-US"><head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no" />
	<title>JoyStick</title>
</head>
<body onload="init();"> 
<script>
      if( window.screen.width < 480 )
        document.querySelector("meta[name=viewport]").content="width=480, user-scalable=no";  
      else 
        document.querySelector("meta[name=viewport]").content="width=device-width, user-scalable=no"; 
</script>

<div class="page">

	<section class="demo">
<div class="controls_ui">
  前左：
	<button type="button" id="fl_speed_down" class="button " style="width: 100;height: 80;"><</button>
  <button type="button" id="fl_speed_value" class="button " style="width: 80;height: 80;">0</button>
	<button type="button" id="fl_speed_up" class="button " style="width: 100;height: 80;">></button>
	<button type="button" id="fl_dir" class="button " style="width: 100;height: 80;">正转</button>
<br>
<br>
<br>
  前右：
  <button type="button" id="fr_speed_down" class="button " style="width: 100;height: 80;"><</button>
  <button type="button" id="fr_speed_value" class="button " style="width: 80;height: 80;">0</button>
  <button type="button" id="fr_speed_up" class="button " style="width: 100;height: 80;">></button>
  <button type="button" id="fr_dir" class="button " style="width: 100;height: 80;">正转</button>
<br>
<br>
<br>
  前右：
  <button type="button" id="bl_speed_down" class="button " style="width: 100;height: 80;"><</button>
  <button type="button" id="bl_speed_value" class="button " style="width: 80;height: 80;">0</button>
  <button type="button" id="bl_speed_up" class="button " style="width: 100;height: 80;">></button>
  <button type="button" id="bl_dir" class="button " style="width: 100;height: 80;">正转</button>
<br>
<br>
<br>
  前右：
  <button type="button" id="br_speed_down" class="button " style="width: 100;height: 80;"><</button>
  <button type="button" id="br_speed_value" class="button " style="width: 80;height: 80;">0</button>
  <button type="button" id="br_speed_up" class="button " style="width: 100;height: 80;">></button>
  <button type="button" id="br_dir" class="button " style="width: 100;height: 80;">正转</button>
<br>
<br>
<br>
  <button id="stop" style="width: 200;height: 150;"> 停  止 </button>
  <button id="send" style="width: 200;height: 150;"> 发  送 </button>
</div>
	</section>
</div>
<div style="text-align:center;clear:both">
<script type="text/javascript">
  var update_time = 500;
  var xmlHttp;
  var itime = 0;
  var ctime = 0;
  var stime = 0;

  var user_play = "";

  var dir = "up";
  var speed  = 50;

  var last_dir = "";

  function init()
  {   
    xmlHttp = createXmlHttpRequest();
    xmlHttp.onreadystatechange=OnMessage;
    //heartbeat_timer = setInterval( function(){ update(); }, update_time );

    ids = [
      "fl_speed_down", "fl_speed_value", "fl_speed_up", "fl_dir",
      "fr_speed_down", "fr_speed_value", "fr_speed_up", "fr_dir",
      "bl_speed_down", "bl_speed_value", "bl_speed_up", "bl_dir",
      "br_speed_down", "br_speed_value", "br_speed_up", "br_dir",   
      "stop", "send" ,
    ];
    for( i = 0; i < ids.length; i++ )
    {
      f = document.getElementById(ids[i]);
      //f.addEventListener('touchstart', EvtHandle, false);   
      f.addEventListener('touchend',   EvtHandle, false);
      //f.addEventListener('mousedown', EvtHandle, false);    
      //f.addEventListener('mouseup',   EvtHandle, false); 
    }     
  }

  
  function createXmlHttpRequest() 
  {
    if (window.ActiveXObject) 
    { 
      return new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest)
    { 
      return new XMLHttpRequest();
    }
  }

  function doSend(message) 
  {
    itime = 0;
    last_dir = dir;
    console.log( message );
    xmlHttp.open("GET", "/" + message, true);
    xmlHttp.send(null);
  }

  function OnMessage()
  {
    if (xmlHttp.readyState==4)
    {// 4 = "loaded"
    
      if (xmlHttp.status==200)
      {// 200 = "OK"
        console.log("Problem retrieving data:" + xmlHttp.responseText );
        
      }
    }
  }

  function _V(a){return document.getElementById(a).innerText;}
  function _S(a, value){document.getElementById(a).innerText = value;}

  function EvtHandle( evt )
  {
    var v = document.getElementById(evt.target.id);
    switch( evt.target.id )
    {
    case "fl_speed_down":  v = parseInt(_V("fl_speed_value")); if( v > 0 )v = v - 10; if( v < 50 ) v = 0;  _S("fl_speed_value", v); break;
    case "fl_speed_value":  break;
    case "fl_speed_up":    v = parseInt(_V("fl_speed_value")); if( v < 250 )v = v + 10; if( v > 250 ) v = 250; if( v < 50 )v = 50;  _S("fl_speed_value", v);  break;
    case "fl_dir":         v = _V(evt.target.id ); _S(evt.target.id, v=="正转" ? "反转" : "正转"); break;

    case "fr_speed_down":  v = parseInt(_V("fr_speed_value")); if( v > 0 )v = v - 10; if( v < 50 ) v = 0;  _S("fr_speed_value", v); break;
    case "fr_speed_value":  break;
    case "fr_speed_up":    v = parseInt(_V("fr_speed_value")); if( v < 250 )v = v + 10; if( v > 250 ) v = 250; if( v < 50 )v = 50;  _S("fr_speed_value", v);  break;
    case "fr_dir":         v = _V(evt.target.id ); _S(evt.target.id, v=="正转" ? "反转" : "正转"); break;

    case "bl_speed_down":  v = parseInt(_V("bl_speed_value")); if( v > 0 )v = v - 10; if( v < 50 ) v = 0;  _S("bl_speed_value", v); break;
    case "bl_speed_value":  break;
    case "bl_speed_up":    v = parseInt(_V("bl_speed_value")); if( v < 250 )v = v + 10; if( v > 250 ) v = 250; if( v < 50 )v = 50;  _S("bl_speed_value", v);  break;
    case "bl_dir":         v = _V(evt.target.id ); _S(evt.target.id, v=="正转" ? "反转" : "正转"); break;

    case "br_speed_down":  v = parseInt(_V("br_speed_value")); if( v > 0 )v = v - 10; if( v < 50 ) v = 0;  _S("br_speed_value", v); break;
    case "br_speed_value":  break;
    case "br_speed_up":    v = parseInt(_V("br_speed_value")); if( v < 250 )v = v + 10; if( v > 250 ) v = 250; if( v < 50 )v = 50;  _S("br_speed_value", v);  break;
    case "br_dir":         v = _V(evt.target.id ); _S(evt.target.id, v=="正转" ? "反转" : "正转"); break;

    case "stop":   doSend("cmd?status=FL(0,1);FR(0,1);BL(0,1);BR(0,1)"); break;
    case "send":
      value = "cmd?status=";
      value = value + "FL(" +_V("fl_speed_value") + ",";
      value = value + (_V("fl_dir") == "正转" ? '1' : '0') + ");";
      value = value + "FR(" + _V("fr_speed_value") + ",";
      value = value + (_V("fr_dir") == "正转" ? '1' : '0') + ");";
      value = value + "BL(" + _V("bl_speed_value") + ",";
      value = value + (_V("bl_dir") == "正转" ? '1' : '0') + ");";
      value = value + "BR(" + _V("br_speed_value") + ",";
      value = value + (_V("br_dir") == "正转" ? '1' : '0') + ")";
      doSend(value);
      break;
    }
  }

</script>
</div>

</body></html>